<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.moveDiv
			{
				font-size: 36px;
				color: #0000ff;
				
				
				position: relative; /* 相对布局 */
				left:0px;
				top:0px;
				
			}
		</style>
		
		<script type="text/javascript">
			
			var t; // 保存正在移动的对象
			var curLeft;  // 记录当前对象偏移位置 距离左边
			var curTop;   // 记录当前对象偏移位置 距离顶部
			var x; // 记录鼠标按下的位置x
			var y; // 记录鼠标按下的位置y
			
			function down(e)
			{
				console.log(e);
				console.log(e.clientX+","+e.clientY);
				
				if(e.target.className == "moveDiv")
				{
					// 记录被移动的对象
					t = e.target;
					// 记录当前对象偏移位置
					curLeft = t.offsetLeft;
					curTop = t.offsetTop;
					// 记录鼠标位置
					x = e.clientX;
					y = e.clientY;
					// 鼠标按下后 添加鼠标移动事件
					document.onmousemove = move;
					// 鼠标抬起 移除鼠标移动事件
					document.onmouseup = function(){
						document.onmousemove = null;	
					}
				}
			}
			// 移动的时候处理
			function move(e)
			{
				t.style.left = curLeft + (e.clientX - x) +"px";
				t.style.top = curTop + (e.clientY - y) +"px";
				return false;
			}
			
			document.onmousedown = down;
		</script>
	</head>
	<body>
		<div class="moveDiv">Hello world</div>
	</body>
</html>
